<template>
  <div>
    <el-card>
      <el-form  :ref="formRule" inline>
        <el-form-item label="分类名称:" class="mgb-0" prop="fname">
          <el-input v-model="product.fname"></el-input>
        </el-form-item>
        <el-form-item label="分类编码:" class="mgb-0" prop="fnumber">
          <el-input v-model="product.fnumber"></el-input>
        </el-form-item>
        <el-form-item class="mgb-0">
          <el-button type="primary" icon="el-icon-search" @click="searchData()"></el-button>
          <el-button type="success" icon="el-icon-refresh" @click="clearData('formRule')"></el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <div style="margin-bottom: 10px">
        <el-button type="primary" @click="openGroupAdd">新增</el-button>
      </div>
      <vxe-table border :data="dataList" v-loading="tableLoading" ref="xTable1" class="sortable-row-demo" :scroll-y="{enabled: false}" >
        <vxe-table-column width="60">
          <template v-slot>
				<span class="drag-btn">
					<i class="vxe-icon--menu"></i>
				</span>
          </template>
          <template v-slot:header>
            <vxe-tooltip v-model="showHelpTip1" content="按住后可以上下拖动排序！" enterable>
              <i class="vxe-icon--question" @click="showHelpTip1 = !showHelpTip1"></i>
            </vxe-tooltip>
          </template>
        </vxe-table-column>
        <vxe-table-column title="序号"  type="seq" width="50"></vxe-table-column>
        <vxe-table-column title="分类名称" field="fname"  show-overflow-tooltip></vxe-table-column>
        <vxe-table-column title="分类编码" field="fnumber"  show-overflow-tooltip></vxe-table-column>
        <vxe-table-column title="操作" field="center">
          <template slot-scope="scope">
            <el-button type="text" @click="openGroupDetail(scope.row.fid)">详情</el-button>
            <el-button type="text" @click="openGroupEdit(scope.row.fid)">编辑</el-button>
            <el-button type="text" style="color: red" @click="deleteGroup(scope.row.fid)">删除</el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <el-pagination
        style="float:right;
         margin: 10px 0;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 15, 20, 50]"
        :page-size="pages.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        prev-text="上一页"
        next-text="下一页"
        :total="pages.totalRows">
      </el-pagination>
    </el-card>
    <!--新增-->
    <productGroup_addEdit v-if="showPages.addEdit" :groupId="groupId" @close="closeOne" ></productGroup_addEdit>
    <!--详情-->
    <productGroup_detail v-if="showPages.detail" :groupId="groupId" @close="closeOne"></productGroup_detail>
  </div>
</template>

<script>
import Tsyu from "@/api/basedataManager/Tsyu";
import TsGroup from "@/api/basedataManager/TsGroup";
import productGroup_addEdit from "@/views/basedataManager/components/productGroup_addEdit";
import productGroup_detail from "@/views/basedataManager/components/productGroup_detail";
export default {
  name: "productGroup",
  components:{
    productGroup_addEdit,
    productGroup_detail,
  },
  data(){
    return {
      product: {
        fname: '',
        fnumber: '',
      },
      pages: {
        page: 1,//当前页面
        pageSize: 10,//当前页数
        totalRows: 0,//总条数

      },
      formRule: {
        fname:'',
        fnumber:''
      },
      groupId: 0,
      showPages:{
        addEdit: false,
        detail: false,
      },
      tableLoading:'',
      dataList:[]
    }
  },
  created(){
    this.getData()
  },
  methods:{
    rowDrop() {
      this.$nextTick(() => {
        const xTable = this.$refs.xTable1
        this.sortable1 = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
          handle: '.drag-btn',
          onEnd: ({
                    newIndex,
                    oldIndex
                  }) => {
            const currRow = this.dataList.splice(oldIndex, 1)[0]
            this.dataList.splice(newIndex, 0, currRow)
          }
        })
      })
    },
    getData(){
      let http=new TsGroup()
      this.tableLoading=true
      let data={
        fname:this.fname,
        fnumber:this.fnumber,
        pageSize:this.pageSize,
        page:this.page,
      }
      http.queryList(data).then(res=>{
        this.dataList=res.data.rows
        this.page=res.data.page
        this.pageSize=res.data.pageSize
        this.totalRows=res.data.totalRows
        this.tableLoading=false
      })
    },
    closeOne(){

    },
    handleCurrentChange(){

    },
    handleSizeChange(){
      this.page=page
      this.getData();
    },
    deleteGroup(){

    },
    openGroupEdit(){

    },
    openGroupAdd(){

    },
    clearData(formName){
     this.$refs[formName].resetFields();
    },
    searchData(){
      this.fname=fname;
      this.fnumber=fnumber;
      this.getData();
    }
  }
}

</script>

<style scoped>

</style>
